/**
 * 公共组件
 * @author xiaoxujs
 */

import { Content, Header } from "antd/es/layout/layout";
import { ButtonBaise, HomeBox } from "./style";
import { ConfigProvider, Dropdown, Menu, MenuProps, Space } from "antd";
import { useCallback, useEffect, useState } from "react";
import { MenuItem } from "../../type/antd";
import { ILoginDataTree, ISessionUserData } from "../../type/login";
import { Outlet, useNavigate } from "react-router-dom";
import { DownOutlined } from "@ant-design/icons";
import { ItemType, SubMenuType } from "antd/es/menu/interface";
import useWindowSize from "../../assets/fun/commit/useWindowSize";
import { useWindowFontSize } from "../../assets/fun/Antd/configprovider";



const Home = () => {
    const navigate = useNavigate();
    const { height } = useWindowSize()

    const [enumData, setEnumData] = useState<MenuItem[]>([]); //菜单数据
    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
    const [personData, setpersonData] = useState<ISessionUserData>()

    /**
     * 整理权限函数
     * @param dataArr 所有权限
     * @param buttonData 按钮权限 
     * @param menuData 菜单权限
     */
    const menuquanxainFun = useCallback(
        (dataArr: ILoginDataTree[], buttonData: string[], menuData?: ItemType[]) => {
            dataArr.forEach((element, index) => {
                if (element.menuType === 'C') {
                    let data = {
                        label: element.menuName,
                        key: element.url,
                        icon: element.icon === '#' ? '' : <span className="anticon anticon-appstore">
                            <span className="iconfont" style={{ fontSize: '1.4rem' }} dangerouslySetInnerHTML={{ __html: element.icon }} ></span>
                        </span>,
                    }
                    if (element.children && element.children.length > 0 && element.children[0].menuType === 'C') {
                        if (menuData) {
                            let newData: SubMenuType = {
                                ...data,
                                children: []
                            }
                            menuData.push(newData)
                            if (menuData.length > 0) {
                                menuquanxainFun(element.children, buttonData, newData.children);
                            } else {
                                menuquanxainFun(element.children, buttonData);
                            }

                        }
                    } else {
                        menuData && menuData.push({
                            ...data
                        })
                    }
                } else if (element.menuType === 'F') { //  f是按钮
                    buttonData.push(element.perms);
                }
            })
        },
        []
    );
    useEffect(() => {
        let data = sessionStorage.getItem('tabsTree');
        let userData = sessionStorage.getItem('userInfo');
        if (userData) {
            setpersonData(JSON.parse(userData) as ISessionUserData)
        }
        if (data) {
            let sessionData = JSON.parse(data) as ILoginDataTree[]
            let menuSessionList: MenuItem[] = []
            let buttonSessionList: string[] = []
            menuquanxainFun(sessionData, buttonSessionList, menuSessionList);
            setEnumData([...menuSessionList])
        }

        return () => {

        }
    }, [menuquanxainFun])
    useEffect(() => {
        const sessionData = sessionStorage.getItem("keyPath");

        if (sessionData) {
            setSelectedKeys(JSON.parse(sessionData) as string[]);

        }

        return () => {

        }
    }, [])
    //点击菜单
    const handleClickMenu: MenuProps["onClick"] = (e) => {
        console.log(e.keyPath)
        setSelectedKeys(e.keyPath);
        sessionStorage.setItem("keyPath", JSON.stringify(e.keyPath));
        navigate(e.key);
    };
    const handleLoginOut = () => {
        // 退出登录
        navigate("/");
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("userInfo");
    };

    const items = [
        // {
        //     key: "1",
        //     label: <span onClick={() =>setVisible(true)}>修改登录密码</span>,
        // },
        {
            key: "2",
            label: <span onClick={() => handleLoginOut()}>退出登录</span>,
        },
    ];
    return <HomeBox>
        <Header className="header-box">
            <ConfigProvider
                theme={{
                    components: {
                        Menu: {
                            itemColor: '#FFFFFF',
                            horizontalItemSelectedColor: '#FFFFFF',
                            itemHoverColor: '#FFFFFF',
                        }
                    }
                }}
            >
                <div className="demo-logo" >
                    <div className="demo-logo-image"></div>
                    <div className="demo-logo-text">智能装车系统</div>
                </div>
                <div className="menu-wai-box">
                    <Menu style={{ width: useWindowFontSize((enumData.length + 1) * 93) + 'rem' }} className="menu-box" onClick={handleClickMenu} selectedKeys={selectedKeys} mode="horizontal" items={enumData} />
                </div>

                <Dropdown menu={{ items }}>
                    <ButtonBaise>
                        <Space>
                            {personData && personData.userName}
                            <DownOutlined />
                        </Space>
                    </ButtonBaise>
                </Dropdown>
            </ConfigProvider>
        </Header>
        <Content className="content-box" style={{ height: height - useWindowFontSize(60), }} >
            <Outlet />
        </Content>
    </HomeBox>
}

export default Home;